<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>Supermercado COTO</title>
		
<link rel="stylesheet" href="estilos/estilo.css" />
		
<script type="text/javascript">
        
        function cambiar(item) {
               obj=document.getElementById(item);
               visible=(obj.style.display!="none")
               codigo = document.getElementById("x" + item);
                    
                if (visible) {
                    obj.style.display="none";
                } else {
                    obj.style.display="block";
                }
            }
</script>
 
		
</head>
<body>
		<!-- Contenido -->
		<div id="contenido">
			<div id="contenidoProductos">
			<h1>Productos</h1>
    
		<ul >
		
			<li  ><a id="x1" href="#" onclick="cambiar('1')" class="Areas" ><b>Verduleria</b></a></li>
			<li id="1" style="display: none; "><ul>
					<li ><a id="x1-1" href="#" onclick="cambiar('1-1')" class="ProdGrals" ><b>Papas</b></a></li>
					<li id="1-1" style="display: none; "><ul >
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Papas Granel</b></a></li>
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Papas Bolsitas</b></a></li>
				        </ul>
				    </li>
					<li ><a id="x1-2" class="ProdGrals" onclick="cambiar('1-2')" href="#"><b>Cebollas</b></a></li>
					<li id="1-2" style="display: none; "><ul >
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Cebollas Granel</b></a></li>
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Cebollas Bolsitas</b></a></li>
				        </ul>
				    </li>
			    </ul>
			</li>
			<li  ><a id="x2" href="#" onclick="cambiar('2')" class="Areas" ><b>Limpieza</b></a></li>
			<li id="2" style="display: none; "><ul >
					<li ><a id="x2-1" class="ProdGrals" onclick="cambiar('2-1')" href="#"><b>Lavandina</b></a></li>
					<li id="2-1" style="display: none; "><ul >
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Ayudin</b></a></li>
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Querubin</b></a></li>
				        </ul>
				    </li>
					<li ><a id="x2-2" class="ProdGrals" onclick="cambiar('2-2')" href="#"><b>Detergente</b></a></li>
					<li id="2-2" style="display: none; "><ul >
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Magistral</b></a></li>
					        <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Ala</b></a></li>
				        </ul>
				    </li>
			    </ul>
			</li>
			<li  ><a id="x3" onclick="cambiar('3');"  href="#"  class="Areas"><b>Bebidas</b></a></li>
			<li id="3" style="display: none; " ><ul >
					<li><a id="x3-1" class="ProdGrals" onclick="cambiar('3-1')" href="#"><b>Bebidas alcholicas</b></a></li>
					    <li id="3-1" style="display: none; "><ul >
					    <li><a id="x3-1-1" class="ProdGrals" onclick="cambiar('3-1-1')" href="#"><b>Cerbeza</b></a></li>
					        <li id="3-1-1" style="display: none; "><ul >
					            <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Schneider</b></a></li>
					            <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Quilmes</b></a></li>
				                </ul>
				            </li>
				           </ul>
				        </li>
				    </li>
					<li ><a id="x3-2" class="ProdGrals" onclick="cambiar('3-2')" href="#"><b>Bebidas sin alchol</b></a></li>
					<li id="3-2" style="display: none; "><ul >
					    <li><a id="x3-2-1" class="ProdGrals" onclick="cambiar('3-2-1')" href="#"><b>Gaseosas</b></a></li>
					        <li id="3-2-1" style="display: none; "><ul >
					            <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Coca-Cola</b></a></li>
					            <li style="list-style-image:url(imagenes/images/ico_carrito.gif)"><a href="#" class="ProdEspc"><b>Pritty</b></a></li>
				                </ul>
				            </li>
				           </ul>
				        </li>
				         </ul>
				    </li>
				</ul>
			</li>
			
		</ul>
		</div>
	</div>
	</body>
</html>
